<!-- https://blog.csdn.net/MFWSCQ/article/details/123365794 -->
<template>
  <div class="icon-wrapper">
    <svg class="icon" aria-hidden="true">
      <use :href="`#icon-${iconName}`" />
    </svg>
  </div>
</template>

<script>
import map from './index'
// 引入本地的svg文件
// 定义一个加载目录的函数
const
  requireAll = requireContext => requireContext.keys().map(requireContext),
  req = require.context('../icons', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)

export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      default: 'Process',
      require: true
    }
  },
  computed: {
    iconName() {
      return map[this.name]
    }
  }
}
</script>
